<template>
  <section>
    <img class="bg" src="/static/images/pic3.png" alt="">
    <h3>{{question.questionName}}</h3>
    <div class="rea">
      <div class="flex-col">
        <div v-for="i in length" class="cases" :key="i">
          <span>{{i}}</span>
        </div>
      </div>
      <draggable class="flex-col abs"
      v-model="dropCases" :options="{group: 'ans'}"
      @end="onEnd"
      @start="drag=true">
        <div v-for="(value, index) in dropCases" class="cases answer" :key="index">
          <span>{{value.optionName}}</span>
        </div>
      </draggable>
    </div>
    <draggable class="flex-col"
    v-model="cases" :options="{group: 'ans'}"
    @end="onEnd"
    @start="drag=true">
      <!-- <div v-for="(value, index) in this.question.optionList" class="cases answer" :key="index">
        <span>{{value.optionName}}</span>
      </div> -->
      <div v-for="(value, index) in this.cases" class="cases answer" :key="index">
        <span>{{value.optionName}}</span>
      </div>
    </draggable>
  </section>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'question',
  data () {
    return {
      title: 'type5',
      cases: [{id: 1, value: '111'}, {id: 2, value: '222'}, {id: 3, value: '333'}, {id: 4, value: '444'}],
      dropCases: [],
      length: 0
    }
  },
  components: {
    draggable
  },
  created () {
    this.initial()
  },
  props: [
    'question'
  ],
  methods: {
    initial () {
      this.cases = this.question.optionList
      this.length = this.question.optionList.length
      // this.length = this.cases.length
    },
    onEnd () {
      if (this.dropCases.length === this.length) {
        var i = 1
        let resultList = []
        this.dropCases.forEach(result => {
          var resultData = {
            content: '',
            optionId: result.id,
            optionOrder: i,
            questionId: this.question.id,
            type: 5
          }
          resultList.push(resultData)
          i++
        })
        console.log(JSON.stringify(resultList))
        this.$emit('pushResultList', resultList)
        this.$emit('next')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rea {
  position: relative;
}
h3 {
  font-size: 40px;
  color: #999;
  margin: 30px auto;
  line-height: 60px;  
}
.flex-col {
  width: 100%;
  min-height: 100px;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  &.abs {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.bg {
  height: 100vw;
  width: 100vw;
}
.cases {
  box-sizing: border-box;
  width: 580px;
  height: 60px;
  border-radius: 60px;
  border: 4px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px;
  span {
    color: #999;
  }
}
.answer {
  border: none;
  background-color: #2e3192;
  span {
    color: #fff;
  }
}
</style>
